<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-08-26 14:49:02
 * @Description:
-->
<template>
  <div v-if="column.display">
    <van-field
            clickable
            :name="column.prop"
            input-align="right"
            right-icon="arrow"
            v-model="currentValue"
            :label="column.label"
            :placeholder="
        column.placeholder ? column.placeholder : '请选择' + column.label"
            :disabled="column.disabled"
            :required="column.required"
            :style="
        column.readonly || column.disabled || column.detail ? 'pointer-events: none;': ''"
            :rules="[{ required: column.required }]"
            @click="show1 = true"
            readonly
    />
    <van-popup v-model:show="show1"  round position="bottom">
      <van-date-picker
              v-model="currentDate1"
              :min-date="column.minDate"
              :max-date="column.maxDate"
              title="选择开始日期"
              @cancel="cancelDatetime1"
              @confirm="confirmDatetime1"
      />
    </van-popup>


    <van-popup v-model:show="show2"  round position="bottom">
      <van-time-picker
              v-model="currentTime1"
              title="选择开始时间"
              :columns-type="columnsType"
              @cancel="cancelDatetime2"
              @confirm="confirmDatetime2"
      />
    </van-popup>


    <van-popup v-model:show="show3"  round position="bottom">
      <van-date-picker
              v-model="currentDate2"
              title="选择结束日期"
              :min-date="minDate"
              :max-date="column.maxDate"
              @cancel="cancelDatetime3"
              @confirm="confirmDatetime3"
      />
    </van-popup>



    <van-popup v-model:show="show4"  round position="bottom">
      <van-time-picker
              v-model="currentTime2"
               title="选择结束时间"
              :columns-type="columnsType"
              @cancel="cancelDatetime4"
              @confirm="confirmDatetime4"
      />
    </van-popup>

  </div>
</template>

<script>
  import mixEvent from './mixins/mixEvent';
  import { formatDateToVants,formatToDateVants} from '@/framework-core/utils/util'
  export default {
    name: "avant-datetimerange",
    props: ['column','modelValue'],
    inject: ['getViewFormData'],
    mixins: [mixEvent],
    data() {
      return {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        columnsType:['hour', 'minute', 'second'],
        currentDate1:[],
        currentTime1:[],
        currentDate2:[],
        currentTime2:[]
      };
    },
    created() {

    },

    mounted(){

      if( this.getViewFormData){
        this.formData = this.getViewFormData()
      }
    },
    computed: {
      minDate() {
        debugger
        let times = [];
        if (this.modelValue) {
          times = this.modelValue.split(",");
        }

        if (!this.column.minDate) {
          return times[0] ? new Date(times[0]) : null;
        }
        if (times[0]) {
          return this.column.minDate
        }
        return this.column.minDate < new Date(times[0]) ? this.column.minDate : new Date(times[0]);
      },

      currentValue () {
       return this.getModelValue();
      },
    },


    methods: {

      /**
       * @description: 关闭开始日期弹窗
       * @param {*}
       * @return {*}
       */
      cancelDatetime1() {
        this.show1 = false;
      },

      /**
       * @description: 开始日期选择确认
       * @param {*} value
       * @return {*}
       */
      confirmDatetime1(value) {

        let v = this.getDateAll(value.selectedValues,this.currentTime1,this.currentDate2,this.currentTime2);
        this.$emit('update:modelValue',v );
        this.bindCalculatorEvent(this.column,v);

        this.show1 = false;
        this.show2 = true;
      },

      getDateAll(currentDate1,currentTime1,currentDate2,currentTime2){

        const d1 = formatDateToVants(currentDate1,"yyyyMMdd");
        const t1 = currentTime1&&currentTime1.length>1?(currentTime1[0] + ":" +  currentTime1[1]+ ":" +  currentTime1[2]):"";
        const d2 = formatDateToVants(currentDate2,"yyyyMMdd");
        const t2 =  currentTime1&&currentTime2.length>1?(currentTime2[0] + ":" +  currentTime2[1]+ ":" +  currentTime2[2]):"";
        const  dts = [];
         dts[0] = d1+" "+t1;
         dts[1] = d2+" "+t2;
         return dts.join(",");
      },

      getModelValue(){
        let  times = [];
        if (this.modelValue) {
          times = this.modelValue.split(",");
        }
        if (!times || times.length == 0) {
          times= ["", ""];
        }
        if (times.length == 1) {
          times.push("");
        }
        this.currentDate1 = formatToDateVants(times[0],"yyyyMMdd");
        this.currentTime1 = formatToDateVants(times[0],"hhmmss");
        this.currentDate2 = formatToDateVants(times[1],"yyyyMMdd");
        this.currentTime2 = formatToDateVants(times[1],"hhmmss");
        return times[0] + "至" + times[1];
      },

      /**
       * @description: 关闭开始时间弹窗
       * @param {*}
       * @return {*}
       */
      cancelDatetime2() {
        this.show2 = false;
      },

      /**
       * @description: 开始时间选择确认
       * @param {*} value
       * @return {*}
       */
      confirmDatetime2(value) {
        let v = this.getDateAll(this.currentDate1,value.selectedValues,this.currentDate2,this.currentTime2);
        this.$emit('update:modelValue',v );
        this.bindCalculatorEvent(this.column,v);
        this.show2 = false;
        this.show3 = true;
      },


      /**
       * @description: 日期结束弹窗
       * @param {*}
       * @return {*}
       */
      cancelDatetime3() {
        this.show3 = false;
      },

      /**
       * @description: 日期结束选择确认
       * @param {*} value
       * @return {*}
       */
      confirmDatetime3(value) {
        this.getModelValue();

        let v =this.getDateAll(this.currentDate1,this.currentTime1, value.selectedValues,this.currentTime2);
        this.$emit('update:modelValue',v );
        this.bindCalculatorEvent(this.column,v);

        this.show3 = false;
        this.show4 = true;
      },


      /**
       * @description: 关闭结束时间弹窗
       * @param {*}
       * @return {*}
       */
      cancelDatetime4() {
        this.show4 = false;
      },

      /**
       * @description: 结束时间选择确认
       * @param {*} value
       * @return {*}
       */
      confirmDatetime4(value) {
        this.getModelValue();

        let v =this.getDateAll(this.currentDate1,this.currentTime1, this.currentDate1,value.selectedValues);
        this.$emit('update:modelValue',v );
        this.bindCalculatorEvent(this.column,v);
        this.show4 = false;
      },
    },
  };
</script>

<style scoped>

</style>
